<template>
  <div>
    <h1 class="title">登录系统</h1>
    <div class="denglukuang">
      <el-form
        :model="user"
        :rules="rules"
        ref="user"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="电话" prop="tle">
          <el-input v-model="user.tle"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input type="password" v-model="user.pwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="doLogin('user')">登录</el-button>
          <el-button @click="resetForm('user')">重置</el-button>
          <el-button @click="zhuce">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userMessage: {
        username: "",
        nickname: "",
        pwd: "",
        sex: "",
        tle: "",
        age: "",
        city: "",
        tle: "",
        plike: "",
        email: "",
      },
      user: {
        tle: "",
        pwd: "",
        act: "login",
      },
      dialogVisible: false,
      rules: {
        tle: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度在11个字符", trigger: "blur" },
        ],
        pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      msg: "",
    };
  },
  methods: {
    addUser() {},
    zhuce() {
      this.$router.push('/UserAdd')
    },
    doLogin(user) {
      this.$refs[user].validate((valid) => {
        if (valid) {
          let url = "/loginController/login";
          let param = this.$qs.stringify(this.user);
          this.$axios
            .post(url, param)
            .then((resp) => {
              let u = resp.data;
              if (u) {
                //把当前用户信息保存到本地
                localStorage.setItem("login_user", JSON.stringify(u));
                //登陆成功,跳转到主页
                if (u.identify === 1) {
                  this.$router.push("/userIndex");
                } else {
                  this.$router.push("/Index");
                }
              } else {
                this.$message.error("登录错误，请重新登录");
              }
            })
            .catch((err) => {
              console.log("error=", err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(user) {
      this.$refs[user].resetFields();
    },
  },
};
</script>
<!-- scoped="scoped"表示当前样式属于局部样式，只在当前组件中有效-->
<style scoped="scoped">
div {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 8%;
}
.title {
  color: white;
  font-size: 20px;
  position: relative;
  top: 100px;
  right: 258px;
}
.denglukuang {
  width: 500px;
  height: 350px;
  border: 1px solid white;
  padding-right: 100px;
  background-color: rgba(153, 80, 46, 0.5);
}
/deep/.el-form-item__label {
  color: white;
  font-size: 15px;
}
</style>
